<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            position: absolute;
            top:0;
            left:0;
            width:100px;
            height:100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        let box = document.getElementById('box');
        function moveElement(){
            //First（第一步）: 在动画开始之前，获取元素的当前位置和尺寸。
            const firstRect = box.getBoundingClientRect();
            console.log(firstRect)
            //Last（最后一步）: 然后，应用任何会导致元素移动或者改变尺寸的 CSS 规则，并且重新获取该元素的最终位置和尺寸。
            box.style.left = '300px';
            box.style.top = '300px';
            //触发重绘以获取最终的位置
            box.offsetHeight;
            //获取元素的最终位置 
            const lastRect = box.getBoundingClientRect();
            console.log(lastRect)
            //Invert（反转）: 
            //计算第一步和第二步之间的差异（位置、尺寸等），
            //并使用 CSS transform 反转这些更改。这意味着，你将元素移动回它原来的位置和尺寸。
            //left=0,top=0   left=300,top=300
            const deltaLeft = firstRect.left - lastRect.left;//-300
            const deltaTop = firstRect.top - lastRect.top;//-300
            //先把渐变关闭
            box.style.transition = 'none';
            //并使用 CSS transform 反转这些更改。这意味着，你将元素移动回它原来的位置和尺寸。
            //使用transform把元素移动回原来的位置
            box.style.transform = `translate(${deltaLeft}px,${deltaTop}px)`;
            //触发重绘以获取最终的位置
            box.offsetHeight;
            //开启渐变，就是当transform属性发生变化的时候在1秒内完成渐变动画
            box.style.transition = `transform 1s`;
            //Play（播放）: 最后，使用 CSS transition 将 transform 属性设置回 "none"，
            //这样元素就会回到它的最终状态。
            box.style.transform = 'none';
        }
        setTimeout(moveElement,300);
    </script>
</body>
</html>
/**
x : 146
y : 50
width : 440
height : 240
top : 50
right : 586
bottom : 290
left : 146
**/